<template>
  <div>
    <h2>个人信息表</h2>
    <p>{{ loginUser }}</p>
    <el-radio-group size="medium">
      <div style="margin: 20px"></div>

      <el-form label-position="left" label-width="10.417vw" :model="loginUser">
        <el-form-item label="编号：">
          <el-input v-model="loginUser.userId" readonly></el-input>
        </el-form-item>
        <el-form-item label="电话：">
          <el-input v-model="loginUser.userTel"></el-input>
        </el-form-item>
        <el-form-item label="昵称：">
          <el-input v-model="loginUser.userName"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-input v-model="loginUser.userSex"></el-input>
        </el-form-item>
        <el-form-item label="注册地点：">
          <el-input v-model="loginUser.userLocation"></el-input>
        </el-form-item>
        <el-form-item label="注册时间：">
          <el-input v-model="loginUser.userTime"></el-input>
        </el-form-item>
        <el-form-item label="用户类型：">
          <el-input v-model="loginUser.userType"></el-input>
        </el-form-item>
        <el-form-item label="VIP：">
          <el-input v-model="loginUser.userVip"></el-input>
        </el-form-item>
        <el-form-item label="实验靶场积分：">
          <el-input v-model="loginUser.userJifen1" readonly></el-input>
        </el-form-item>
        <el-form-item label="CTF积分：">
          <el-input v-model="loginUser.userJifen2" readonly></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-input v-model="loginUser.userStatus" readonly></el-input>
        </el-form-item>
        <el-form-item label="资产：">
          <el-input v-model="loginUser.userProperty" readonly></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-image :src="loginUser.userSrc" class="avatar" ></el-image>
          <!-- </el-upload> -->
        </el-form-item>
      </el-form>
    </el-radio-group>
  </div>
</template>

<script>

import { createNamespacedHelpers } from "vuex";
const { mapMutations: mapuserinfomutation, mapState: mapuserinfostate } =
  createNamespacedHelpers("userinfo");

const {  mapMutations } = createNamespacedHelpers("tags");
export default {
  data() {
    return {
      updatePer: {
        userTel: "",
        userName: "",
        userSex: "",
        userJifen1: "",
        userJifen2: "",
        userSrc: "",
        userType: "",
        userVip: "",
        userTime: "",
        userLocation: "",
      },
    };
  },
  methods: {
    ...mapMutations(["addTabs"]),
    handlesAvatarSuccess(args) {
      console.log("args", args);
      this.userSrc = `http://172.16.13.162:8090${args.data[0]}`;
      this.updatePer.userSrc = `http://172.16.13.162:8090${args.data[0]}`;
    },
    beforeAvatarsUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async addPerApi() {
      console.log("修改后的数据", this.updatePer);
      const result = await this.$api.users.updateUsers(this.updatePer);
      console.log("results", result);
      if (result.code) {
        this.$message.success(result.message);
      }
    },
  },
  beforeRouteEnter(to,from,next){
        next(vm=>{
           vm.addTabs(to)
        })
 },
  computed: {
    ...mapuserinfostate(["loginUser"]),
  },
};
</script>

<style scoped>
.el-input {
  width: 31.25vw;
}
.el-form-item__label {
  width: 15.625vw;
}
.el-form-item {
  width: 41.667vw;
  font-size: 1.563vw;
  font-weight: 36.458vw;
}
.ava {
  margin-right: 26.042vw;
}
.avatar-uploader ::v-deep .el-upload {
  border: 0.052vw dashed #d9d9d9;
  border-radius: 0.313vw;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader ::v-deep .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 1.458vw;
  color: #8c939d;
  width: 9.271vw;
  height: 9.271vw;
  text-align: center;
  line-height: 9.271vw;
  border: 0.052vw solid #8c939d;
}
.avatar {
  width: 9.271vw;
  height: 9.271vw;
  display: block;
}
.btn {
  margin: 1.563vw;
}
</style>
